<!--  -->
<template>
<div class="student-item">
  <div class="student-head flex-a-c flex-j-sb">
    <h3>{{itemObj.relation_name}}</h3>
    <div class="head-tag flex-a-c">
      <div class="tag-item" :style="`background:rgba(${coThemeColor},0.08)`" v-if="itemObj.entries_number > 0">参赛次数：{{itemObj.entries_number}}</div>
      <div class="tag-item" :style="`background:rgba(${coThemeColor},0.08)`" v-if="itemObj.award_number > 0">获奖次数：{{itemObj.award_number}}</div>
    </div>
  </div>
  <div class="student-wrap">
    <div class="entry-item flex">
      <div class="entry-name">性别</div>
      <div class="entry-val">{{itemObj.sex ==1?'男':'女'}}</div>
    </div>
    <div class="entry-item flex">
      <div class="entry-name">学校</div>
      <div class="entry-val">{{itemObj.school}}</div>
    </div>
    <div class="entry-item flex">
      <div class="entry-name">出生日期</div>
      <div class="entry-val">{{itemObj.birthday}}</div>
    </div>
    <div class="entry-item flex">
      <div class="entry-name">班级</div>
      <div class="entry-val">{{itemObj.school_class}}</div>
    </div>
    <div class="entry-item flex">
      <div class="entry-name">地址</div>
      <div class="entry-val">{{itemObj.address}}</div>
    </div>
    <div class="student-btnGroup flex">
      <div class="student-btn" @click="studentTo">编辑</div>
      <div class="student-btn" @click="studentDel">删除</div>
    </div>
  </div>
</div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  props: {
    itemObj: {
      type: Object,
      default:{}
    },
    coThemeColor:{
      type:String,
      default:'241, 83, 83'
    }
  },
  name:'',
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
  return {

  };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    studentDel() {
      this.$emit('studentDel',this.itemObj.id)
    },
    studentTo() {
      this.$router.push(this.fun.getUrl("actionStudent", {}, {id:this.itemObj.id}));
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {

  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {

  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="scss" scoped>
/* @import url(); 引入公共css类 */
.student-item {
  background: #FFFFFF;
  border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
  padding:0.75rem;
  margin:0 0 0.625rem 0;
  .student-head {
    border-bottom:0.0625rem solid  #F5F5F5;
    padding:0 0 0.8125rem 0;
    h3 {
      font-weight: bold;
      font-size: 1.25rem;
      color: #00001C;
    }
    .head-tag {
      .tag-item {
        font-weight: 400;
        font-size: 0.75rem;
        line-height:0.75rem;
        color: var(--themeBaseColor);
        padding:0.3125rem 0.4375rem 0.3125rem 0.3125rem;
        // background: rgba(241, 83, 83, 0.08);
        border-radius: 0.25rem 0.25rem 0.25rem 0.25rem;
        &:nth-child(1) {
          margin:0 0.5rem 0 0;
        }
      }
    }
  }
  .student-wrap {
    padding:0.9375rem 0 0 0;
    .entry-item {
      padding:0 0 0.9375rem 0;
      font-weight: 400;
      font-size: 0.8125rem;
      color: #00001C;
      text-align: left;
      .entry-name {
        width:25%;
        text-align: left;
      }
      .entry-val {
        width:75%;
      }
    }
    .student-btnGroup  {
      justify-content: flex-end;
      .student-btn {
        border-radius: 1.875rem 1.875rem 1.875rem 1.875rem;
        border: 0.0625rem solid #AAAAB3;
        font-weight: 400;
        font-size: 0.8125rem;
        line-height: 0.8125rem;
        color: #00001C;
        padding:0.625rem 1.625rem;
        cursor: pointer;
        &:nth-child(1) {
          margin:0 0.5rem 0 0;
        }
      }
    }
  }
}


</style>